<template lang="pug">
    div(class="jb-ucenter-navigation")
        el-row(class="jb-ucenter-navigation__items")
            el-col(:span="8")
                div(class="align-c")
                    svg(class="icon" aria-hidden="true", @click.stop="goto('/user/i-like')")
                        use(xlink:href="#icon-like")
                div(class="align-c")
                    span(@click.stop="goto('i-like')") 点赞
            el-col(:span="8")
                div(class="align-c")
                    svg(class="icon" aria-hidden="true", @click.stop="goto('/user/i-favorite')")
                        use(xlink:href="#icon-shoucang-")
                div(class="align-c")
                    span(@click.stop="goto('i-favorite')") 收藏
            el-col(:span="8")
                div(class="align-c")
                    svg(class="icon" aria-hidden="true", @click.stop="goto('/user/my-comments')")
                        use(xlink:href="#icon-pinglun1")
                div(class="align-c")
                    span(@click.stop="goto('/user/my-comments')") 评论
</template>

<script>
    export default {
        name: 'jb-ucenter-navigation',
        methods: {
            goto(path){
                this.$router.push({path: path})
            }
        }
    }
</script>

<style lang="less" scoped>
    .jb-ucenter-navigation {
        background-color: white;
        padding: 10px 0;

        &:root {
            font-size: 1rem;
        }

        &__items {

            .align-c {
                text-align: center;
            }

            .icon {
                @icon_width: 20px;
                width: @icon_width;
                height: @icon_width;
            }

            font-size: 0.9em;
        }


    }
</style>

